<template>
	<div style="background-color: #FAFAFA;">
		<div style="font-size: 1.5rem;text-align: left;height: 5vh;line-height: 5vh;margin-left: 2vw;">
			<span style="font-weight: bold;">购物车</span>
			<span style="margin-left: 75vw;font-size: 0.5rem;" @click="clearAll">全部清空</span>
		</div>
		<!-- 购物车布局 -->
		<div v-if="this.isshow">
			<div v-for="(item,index) in list">
				<div id="right" style="display: flex;">
					<!-- 单选 -->
					<div style="width: 4vw;margin-top: 6vh;margin-left: 1vw;">
						<input type="checkbox" name="" id="" class="checkbox" :value="index" v-model="box"
							@change="all" />
					</div>

					<div style="width: 94vw;margin-left: 1vw;">

						<van-swipe-cell style="text-align: left;">
							<router-link :to="{path:'/details',query:{goods_id:item.goods_id}}">
								<van-card :num="item.number" :price="item.price" :desc="item.remark"
									:title="item.goods_name" class="goods-card" :thumb="url+item.goods_img" />
							</router-link>
							<template #right class="right">
								<van-button style="height: 20vh;width: 5vw;font-size: 1rem;" color="#FFCE45" square
									text="找相似" type="danger" class="delete-button" />
								<van-button @clixk="collect()" style="height: 20vh;width: 5vw;font-size: 1rem;"
									color="#F16C2D" square text="移入收藏夹" type="danger" class="delete-button" />
								<van-button @click="del(item.id)" style="height: 20vh;width: 5vw;font-size: 1rem;"
									color="#f03131" square text="删除" type="danger" class="delete-button" />
							</template>
						</van-swipe-cell>
					</div>

				</div>
			</div>
		</div>
		<div v-else style="height: 90vh;">
			<el-empty description="购物车暂无商品"></el-empty>
			<button @click="addshop" type="button"
				style="margin-top: 10vh;width: 25vw;border-radius: 10px; height: 5vh;background-color: #222222;color: #fff;">立即添加</button>
		</div>


		<!-- 提交订单 -->
		<div id="btn">
			<van-submit-bar :price='total' button-text="提交订单">
				<input class="checkbox" type="checkbox" @change="checkall" v-model="quanxuan">全选
			</van-submit-bar>
		</div>
		<!-- {{box}} -->

	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				checked: false,
				url: '',
				userInfo: {},
				isshow: true,
				box: [],
				quanxuan: false

			}
		},
		mounted() {

			// if(!this.list.length){
			// 	this.isshow=false
			// }
		},
		computed: {
			number() {
				var number = 0
				for (var i = 0; i < this.box.length; i++) {
					number += this.list[i].number
				}
				return number*1
			},
			total() {
				
				this.box.sort()
				var total = 0
				for (var i = 0; i < this.box.length; i++) {
					total += this.list[this.box[i]].number * this.list[this.box[i]].price
				}
				return total*100
			}
		},
		created() {
			// this.isshow=localStorage.getItem('isshow')
			// console.log(this.isshow)
			// if(!this.list.length){
			// 	this.isshow=false
			// }else{
			// 	this.isshow=true
			// }
			// console.log(testStr)
			this.$store.dispatch("user/Home_Url").then(e => {
				// console.log(e,111)
				this.url = e
			})




			//   获取用户信息
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
			// console.log(userInfo.member_id,789)
			this.getCart()

			// if(!this.list.length){
			// 	this.isshow=false
			// }else{
			// 	this.isshow=true
			// }

		},
		methods: {
			// 收藏
			collect() {

			},
			// 全选
			checkall() {
				if (this.list.length == this.box.length) {
					this.box = []
				} else {
					this.box = []
					for (var i = 0; i < this.list.length; i++) {
						this.box.push(i)
					}
				}
			},
			all() {
				if (this.box.length == this.list.length) {
					this.quanxuan = true
				} else {
					this.quanxuan = false
				}
			},

			// 添加购物车商品
			addshop() {
				this.$router.push('/')
			},
			// 清空购物车
			clearAll() {
				let userInfo = JSON.parse(localStorage.getItem('userInfo'))
				this.$store.dispatch("user/Get_ClearAll", userInfo.member_id).then(e => {
					// console.log(e.data.data)
					this.list = e.data.data
					if (!this.list.length) {
						this.isshow = false
					}

					// console.log(e,555566666)
				})
			},

			getCart() {
				this.$store.dispatch("user/Get_Cart", this.userInfo.member_id).then(e => {
					// console.log(e.data.data)
					this.list = e.data.data
					if (!this.list.length) {
						this.isshow = false
					} else {
						this.isshow = true
					}
					// console.log(this.list.length)
					// console.log(e,555566666)
				})
			},
			del(id) {
				// console.log(123)
				// 删除购物车
				this.$store.dispatch("user/Get_DelCart", id).then(e => {
					// console.log(e.data.data)
					this.listCommend = e.data.data
					this.getCart()
				})

			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	#right .van-button--normal {
		padding: 18px 12px 50px 12px !important;
	}

	.van-submit-bar {
		bottom: 8vh !important;
	}

	/* 	.btn .van-button::before{
		background-color: #000000;
	} */
	#btn .van-button--danger {
		background: #222222;
	}

	#btn .van-button--round {
		border-radius: 5px;
	}

	#btn {
		position: fixed;
		align-items: center;

	}

	.checkbox:checked {
		background: #1673ff
	}

	.checkbox {

		outline: none;
		width: 5vw;
		height: 3vh;
		background-color: #ffffff;
		border: solid 1px #ccc;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		font-size: 0.8rem;
		margin: 0;
		padding: 0;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		-webkit-user-select: none;
		user-select: none;

	}

	.checkbox:checked::after {
		content: '';
		top: 5px;
		left: 5px;
		position: absolute;
		background: transparent;
		border: #fff solid 2px;
		border-top: none;
		border-right: none;
		height: 6px;
		width: 10px;
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
</style>
